<template>
  <div>
    <el-card style="margin: 20px 0">
      <CategorySelect
        :show="scene !== 0"
        @getCategoryId="getCategoryId"
      ></CategorySelect>
    </el-card>
    <el-card>
      <!-- 底部将来有三部分进行切换 -->
      <div v-show="scene === 0">
        <!-- 展示SPU列表的结构 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          style="margin-bottom: 8px"
          :disabled="!category3Id"
          @click="addSpu"
        >
          添加SPU
        </el-button>
        <el-table border stripe style="width: 100%" :data="records">
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="spuName" label="spu名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="spu描述" width="width">
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template #default="{ row }">
              <HintButton
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></HintButton>
              <HintButton
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></HintButton>
              <HintButton
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku列表"
              ></HintButton>
              <el-popconfirm title="确定删除吗？" @onConfirm="deleteSpu(row)">
                <HintButton
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除spu"
                ></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          :current-page="page"
          :page-sizes="[3, 6, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <SpuForm
        v-show="scene === 1"
        ref="spu"
        @changeScene="changeScene"
      ></SpuForm>
      <SkuForm
        v-show="scene === 2"
        ref="sku"
        @changeScenes="changeScenes"
      ></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SpuForm from './components/SpuForm'
import SkuForm from './components/SkuForm'
import { getSpuListApi, deleteSpuApi } from '@/api/spu'
export default {
  name: 'Spu',
  components: {
    SpuForm,
    SkuForm
  },
  data () {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      show: true,
      page: 1, // 页码
      limit: 6, // 每页大小
      records: [], // spu列表的数据
      total: 0, // 总数
      scene: 0 // 0:展示SPU列表数据 1:添加或修改SPU 2:添加SKU
    }
  },
  methods: {
    // skuForm自定义事件的回调
    changeScenes (scene) {
      this.scene = scene
    },
    // 添加sku按钮的回调
    addSku (row) {
      // 切换场景
      this.scene = 2
      // 调用子组件的方法,发送请求
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },
    // 删除spu的回调
    async deleteSpu (row) {
      try {
        await deleteSpuApi(row.id)
        this.$message.success('删除成功')
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
      } catch (error) {
        console.log(error)
      }
    },
    // 三级联动组件的自定义事件,将子组件对应的Id传给父组件
    getCategoryId ({ categoryId, level }) {
      // console.log(categoryId, level)
      if (level === 1) {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        this.category3Id = categoryId
        // 获取SPU列表数据进行展示
        this.getSpuList()
      }
    },
    // 获取SPU列表数据的方法
    async getSpuList (pager = 1) {
      this.page = pager
      try {
        const { data } = await getSpuListApi(this.page, this.limit, this.category3Id)
        // console.log(data)
        this.total = data.total
        this.records = data.records
      } catch (error) {
        console.log(error)
      }
    },
    // 页面大小改变的回调
    handleSizeChange (newSize) {
      this.limit = newSize
      this.getSpuList()
    },
    // 页码改变的回调
    handleCurrentChange (newPage) {
      this.page = newPage
      this.getSpuList(this.page)
    },
    // 添加Spu按钮的回调
    addSpu () {
      this.scene = 1
      // 通知子组件spuForm发送请求->两个请求,鞋带上三级分类的Id
      this.$refs.spu.addSpuData(this.category3Id)
    },
    // 修改Spu的回调
    updateSpu (row) {
      // console.log(row)
      this.scene = 1
      this.$refs.spu.initSpuData(row)
    },
    changeScene (scene) {
      this.scene = scene
      this.getSpuList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
